<template>
  <div>
    <!-- 外框 -->
    <el-row :gutter="5" style="border: 1px solid red;">
      <!-- 联系电话区 -->
      <el-col :span="14">
        <el-row style="height: 20px;"></el-row>
        <el-row style="border: 1px solid blue;">
          <el-table :data="pageInfo.list" style="width: 100%" @cell-click="showImg">
            <el-table-column label="序号" width="120" type="index">
            </el-table-column>
            <el-table-column label="名称" width="200">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="电话" width="170">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地址" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-row>
        <!-- 分页功能 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[2,3,4]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
          </el-pagination>
        </div>
      </el-col>
      <!-- 图片展示区 -->
      <el-col :span="10">
        <el-row style="border: 1px solid blue;" class="infinite-list">
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image :src="img" style="width: 500px;height: 300px;" fit="fill">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //当前页码
        currentPage: 1,
        //每页显示的条数
        pageSize: 2,
        //表格数据
        pageInfo: {},
        //展示区图片
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      //点击表格，换展示图片
      showImg(data) {
        console.log(data.img)
        console.log(data.id)
        this.imgID=data.id;
        this.img=data.img;
      },
      //分页查询方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getEpidemic_Specical_ThingsList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getEpidemic_Specical_ThingsList();
      },
      //获取数据库数据方法
      getEpidemic_Specical_ThingsList() {
        this.$axios.get("http://localhost:8080/epidemic_special_things" + "/" + this.currentPage + "/" + this.pageSize).then(res => {
          console.log(res.data);
          this.pageInfo = res.data.data;
        })
      },
    },
    created() {
      this.getEpidemic_Specical_ThingsList();
    },
  }
</script>

<style>
  .el-table__header-wrapper {
    line-height: 20px
  }

</style>
